<template>
  <vxe-modal :before-hide-method="beforeHideMethod" title="打印模板" v-model="showPrint"
               :width="increaseWidth?(Fields.base.pageSize?Fields.base.pageSize+350:1280):Fields.base.pageSize+40"
               :height="700" transfer>
        <template #default>
            <div class="disflex">
                <div class="cPrint">
                    <div :style="{minWidth:Fields.base.pageSize}">
                        <vxe-toolbar>
                            <template #buttons>
                                <el-button size="small" type="primary" @click="printEvent1()">打印</el-button>
                                <el-button size="small" type="success" v-if="showSet" @click="printSettings">打印设置</el-button>
                                <el-button size="small" type="success" v-if="increaseWidth&&showSet" v-show="ispath" @click="saveSettings">保存设置</el-button>
                                 <div v-if="!increaseWidth" style="margin: 10px" >份数 <el-input-number style="width: 100px" size="small"   v-model="printNum" placeholder="请输入名称" clearable></el-input-number></div>
                                 <vxe-input  v-if="increaseWidth" style="margin: auto" v-model="printData.name" placeholder="请输入名称" clearable></vxe-input>
                            </template>
                        </vxe-toolbar>
                        <el-divider style="margin: 0px"/>
                        <div id="printMe" ref="printMe"  :style="{height:(Height-150)+ 'px'}">
                            <div class="prints" ref="prints" v-for="Nums in printNum" :style="Fields.base.style">
                                <div class="print_top" v-if="Fields.base.isHead&&!Fields.base.mingxitiao&&Fields.base.mingxitiao==0" id="htmlTitle">
                                    <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;">
                                        <div v-for="(item,index) in  Fields['header']"
                                             :style="{float: 'left',height: Fields.base.height+(index===0?10:0)+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                             :key="index">
                                            <div v-if="(item.type===9||item.type===8)">
                                                <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="item.type!==8"/>
                                                <sxmbarcode
                                                        :style="item.style==='' ? '' : item.style"
                                                        v-if="item.type===8"
                                                        :value="ft(item)"
                                                        :format="item.format"
                                                        :height="item.height"
                                                        :displayValue="item.displayValue"
                                                ></sxmbarcode>
                                            </div>
                                            <div v-else :style="item['style']===''?{}:item['style']">
                                              <span :style="item.style">
                                               {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                              </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              <div style="position: relative;" class="gao" v-for="sxmdayin in Math.ceil(DetailsData[Fields.base.tableNames].length/Fields.base.mingxitiao)" :id="'htmlzong'+sxmdayin" v-if="(Fields.base.iscard===1&&Fields.base.isBody&&Fields.base.mingxitiao)">
                                <div class="print_top" v-if="Fields.base.isHead&&Fields.base.mingxitiao&&Fields.base.mingxitiao>0" id="htmlTitle">
                                  <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;">
                                      <div v-for="(item,index) in  Fields['header']"
                                           :style="{float: 'left',height: Fields.base.height+(index===0?10:0)+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                           :key="index">
                                          <div v-if="(item.type===9||item.type===8)">
                                              <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="item.type!==8"/>
                                              <sxmbarcode
                                                      :style="item.style==='' ? '' : item.style"
                                                      v-if="item.type===8"
                                                      :value="ft(item)"
                                                      :format="item.format"
                                                      :height="item.height"
                                                      :displayValue="item.displayValue"
                                              ></sxmbarcode>
                                          </div>
                                          <div v-else :style="item['style']===''?{}:item['style']">
                                            <span :style="item.style">
                                             {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                            </span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                                <table style="margin-top: 20px; width: 100%;border-collapse: collapse; text-align: center;" border="1" >
                                    <thead>
                                        <tr>
                                            <td v-if="Fields.base.showSeq" style="width: 50px;padding: 5px;">#</td>
                                            <td v-for="(item,index) in Fields['detail']" :key="index" style="padding: 5px;" :style="{'width':item.width+'px'}">{{item.title}}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(sxitem,index) in DetailsData[Fields.base.tableNames]" v-show="sxmdayin==1&&index<Fields.base.mingxitiao" :key="'s'+index" :class="index!=0&&index % pageSizesxtty === 0?'':''">
                                            <td v-if="Fields.base.showSeq" style="padding: 5px;">{{index}}</td>
                                            <td v-for="(item,index) in Fields['detail']" :key="index" style="padding: 5px;">{{sxitem[item.fieldName]}}</td>
                                        </tr>
                                        <tr v-for="(sxitem,index) in DetailsData[Fields.base.tableNames]" v-show="sxmdayin>1&&index>=(sxmdayin-1)*Fields.base.mingxitiao&&index<(sxmdayin)*Fields.base.mingxitiao" :key="'s'+index" :class="index!=0&&index % pageSizesxtty === 0?'':''">
                                            <td v-if="Fields.base.showSeq" style="padding: 5px;">{{index}}</td>
                                            <td v-for="(item,index) in Fields['detail']" :key="index" style="padding: 5px;">{{sxitem[item.fieldName]}}</td>
                                        </tr>
                                        <tr v-if="isheji&&sxmdayin==Math.ceil(DetailsData[Fields.base.tableNames].length/Fields.base.mingxitiao)">
                                            <td v-if="Fields.base.showSeq" style="padding: 5px;">合计</td>
                                            <td v-for="(item,index) in Fields['detail']" :key="index" style="padding: 5px;">
                                                <span v-if="Fields.base.showSeq">{{item['sum']==1?hejijisuan(DetailsData[Fields.base.tableNames],item.fieldName):''}}</span>
                                                <span v-if="Fields.base.showSeq==false&&index==0">合计</span>
                                                <span v-if="Fields.base.showSeq==false&&index!=0">{{item['sum']==1?hejijisuan(DetailsData[Fields.base.tableNames],item.fieldName):''}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div id="htmlwei" class="print_top no-break" v-if="Fields.base.isFooter&&printType!==2" style="margin-top: 10px">
                                  <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;">
                                      <div v-for="(item,index) in  Fields['footer']"
                                           :style="{float: 'left',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                           :key="index">
                                          <div v-if="(item.type===9||item.type===8)">
                                              <img :style="item['style']===''?{}:item['style']" alt :src="item.text"
                                                   v-if="(item.type!=8)"/>
                                              <sxmbarcode
                                                       v-if="(item.type===8)"
                                                      :value="ft(item)"
                                                      :format="item.format"
                                                      :height="item.height"
                                                      :displayValue="item.displayValue"
                                              ></sxmbarcode>
                                          </div>
                                          <div v-else :style="item['style']===''?{}:item['style']">
                                            <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                             {{ item.title !== '' ? item.title + ' :' : '' }}{{ ft(item) }}
                                          </span>
                                          </div>
                                      </div>
                                  </div>
                                  <div style="font-size: 12px;position: absolute;bottom: 0;right: 0;">共{{Math.ceil(DetailsData[Fields.base.tableNames].length/Fields.base.mingxitiao)}}页,第{{sxmdayin}}页</div>
                              </div>
                              </div>
                                <div v-if="Fields.base.isBody&&Fields.base.iscard===2" class="cardsx">
                                    <div v-for="(v ,i) in DetailsData[Fields.base.tableNames]" :key="i" :style="{'page-break-after':fy(i)}">
                                        <div class="box-card"
                                             :style="{'margin-top': '10px','display':' inline-block','width':Fields.base.cardGrid/24*100+'%','margin-right':jiangepanduan(i)}">
                                            <div >
                                                <div v-for="(item,index) in Fields['detail']" :key="index"
                                                     class="borderbotom"
                                                     :style="{width:item.span/24*100+'%','height':item.heighty?((item.rowHeight===undefined?Fields.base.height:item.rowHeight)*item.heighty)+'px':(item.rowHeight===undefined?Fields.base.height:item.rowHeight)+'px','line-height':(item.rowHeight===undefined?Fields.base.height:item.rowHeight)+'px',float:item.location??'none'}">
                                                        <div    v-if="((item.type!==8)&&Fields.detail[index]['direction']===0)"
                                                              :style="{'box-sizing':' border-box','display':'block', height: 'inherit','font-size':item.style['fontSize']+'px','line-height':item.style['fontSize']+'px'}">
                                                              <div v-if="item.fl"  :style="{height: 'inherit',lineHeight:'inherit',display:'inline-flex' }">
                                                                   <div class="title" :style="{float:'left',padding:(((item.rowHeight===undefined?Fields.base.height:item.rowHeight)*item.heighty-item.style['fontSize'])/2)+'px'+' 5px',margin:'-1px',width:item.titleWidth+'px'
                                                                   ,borderRight:'1px solid #000',textAlign:item.titleAlign??'left',display: item.titleWidth>0?'inline-block':'none' }">{{item.title}}</div>
                                                                   <div class="content" :style="{float:'left',textAlign:item.contentAlign??'left',padding:'5px',width:(ContentWidth*(item.span/24)*(Fields.base.cardGrid/24)-item.titleWidth)+'px' ,display:'flex'}">
                                                                   <span style="margin: auto  0px;width: 100%">{{increaseField['field']===item.fieldName?increaseValue(Nums):fv(v[item.fieldName],item)}}</span>
                                                                   </div>

                                                               </div>
                                                              <div :style="{'padding':' 5px'}" v-else>{{item.title !== '' ? item.title + ':' : ''}}{{fv(v[item.fieldName],item)}}</div>

                                                        </div>
                                                        <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                             v-if="(item.type!==8&&Fields.detail[index]['direction']===1)">
                                                            <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                                 style="border-bottom:1px solid #000;padding:0 5px;box-sizing: border-box;">
                                                                {{ item.title }}
                                                            </div>
                                                            <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                                 style="padding:0 5px;box-sizing: border-box;">
                                                                {{ fv(v[item.fieldName],item) }}
                                                            </div>
                                                        </div>
                                                        <sxmbarcode
                                                              :style="{padding: '10px', 'text-align': item.titleAlign}"
                                                              v-if="(item.type===8)"
                                                              :value="v[item.fieldName]"
                                                              :format="item.format"
                                                              :height="item.height"
                                                              :displayValue="item.displayValue">
                                                        </sxmbarcode>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                
                                <div class="print_top" v-if="Fields.base.isFooter&&printType===2" style="margin-top: 10px">
                                    <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;">
                                        <div v-for="(item,index) in  Fields['footer']"
                                             :style="{float: 'left',margin:'0 -1px  -1px 0',border:'solid 1px #000',padding:'0 5px',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                             :key="index">
                                            <div :style="item['style']===''?{}:item['style']">
                                              <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                               {{ item.title !== '' ? item.title + ' : ' : '' }}{{ item.text }}
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="tPrint" ref="tPrint" v-show="increaseWidth&&showSet" v-if="ispath">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基础" name="first">
                            <el-form size="small">
                                <el-form-item label="明细表名">
                                    <el-select v-model="Fields.base.tableNames" class="m-2" placeholder="Select" size="small">
                                        <el-option v-for="items in TFields" :key="items.tableName" :label="items.tableDispName" :value="items.tableName" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="边距">
                               <el-row>
                                 <el-col :span="24"><span style="margin:0 10px;">上</span>
                                  <el-input size="small" class="bjw" v-model="Fields.base.style.paddingTop" placeholder="单位PX"></el-input>
                                  <span style="margin:0 10px;">左</span>
                                  <el-input size="small" class="bjw"  v-model="Fields.base.style.paddingLeft" placeholder="单位PX"></el-input>
                                  </el-col>
                                  <el-col :span="24">
                                  <span style="margin:0 10px;">下</span>
                                  <el-input size="small" class="bjw"  v-model="Fields.base.style.paddingBottom" placeholder="单位PX"></el-input>
                                  <span style="margin:0 10px;">右</span>
                                  <el-input size="small" class="bjw"  v-model="Fields.base.style.paddingRight" placeholder="单位PX"></el-input>
                                  </el-col>
                               </el-row>


                                </el-form-item>
                                <el-radio-group v-model="Fields.base.iscard" class="ml-4">
                                    <el-radio :label="1" size="large">表格模式</el-radio>
                                    <el-radio :label="2" size="large">卡片模式</el-radio>
                                </el-radio-group>
                                <el-form-item label="明细表条数" v-if="Fields.base.iscard===1">
                                  <el-input type="Number" v-model="Fields.base.mingxitiao"></el-input>
                                </el-form-item>
                                <el-form-item label="强制分页" v-if="Fields.base.iscard===2">
                                    <el-select v-model="Fields.base.fy" size="small" class="m-2">
                                        <el-option label="否" :value="0"></el-option>
                                        <el-option label="1" :value="1"></el-option>
                                        <el-option label="2" :value="2"></el-option>
                                        <el-option label="4" :value="4"></el-option>
                                        <el-option label="6" :value="6"></el-option>
                                        <el-option label="8" :value="8"></el-option>
                                        <el-option label="10" :value="10"></el-option>
                                        <el-option label="12" :value="12"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字号">
                                    <el-input-number placeholder="请输入" v-model="Fields.base.fontSize" size="small"></el-input-number>px
                                </el-form-item>
                                <el-form-item label="行高"><el-input-number placeholder="请输入" v-model="Fields.base.height" size="small"></el-input-number>px</el-form-item>
                                <el-form-item label="页宽"> <el-input-number placeholder="请输入" v-model="Fields.base.pageSize" size="small"></el-input-number>px</el-form-item>
                                <el-form-item label="标题宽"> <el-input-number placeholder="请输入" v-model="Fields.base.titleWidth" size="small"></el-input-number>px</el-form-item>
                                <el-form-item label="卡片栅格" v-if="Fields.base.iscard===2"><el-input-number v-model="Fields.base.cardGrid" size="small" :min="1" :max="24"/></el-form-item>
                                <el-form-item label="卡片间隔" v-if="Fields.base.iscard===2"><el-input-number v-model="Fields.base.cardInterval" size="small" :min="0"/></el-form-item>

                                <el-form-item label="打印内容">
                                  <el-checkbox v-model="Fields.base.isHead" label="表头" size="small"/>
                                  <el-checkbox v-model="Fields.base.isBody" label="表体" size="small"/>
                                  <el-checkbox v-model="Fields.base.isFooter" label="表尾" size="small"/></el-form-item>
                                <el-form-item label="表体选项" v-if="Fields.base.isBody">
                                    <el-checkbox v-model="Fields.base.showSeq" label="显示序号" size="small"/>
                                </el-form-item>
                                <el-form-item label="自增字段">
                                    <el-select v-model="Fields.base.increaseField" class="m-2" placeholder="Select" size="small">
                                       <el-option v-for="item in mainTable.Fields" :key="item.fieldID" :label="item.fieldDispName" :value="item.fieldName" />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="表头" :disabled="!Fields.base.isHead" name="second">
                            <div style="height: calc(100vh - 100px);overflow: auto;">
                                <vxe-toolbar>
                                    <template #buttons>
                                        <vxe-button size="mini" icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
                                        <vxe-button size="mini" icon="vxe-icon-square-plus" @click="removeEvent()">删除</vxe-button>
                                    </template>
                                </vxe-toolbar>
                                <vxe-table
                                        border
                                        ref="head"
                                        height="250"
                                        size="mini"
                                        :row-config="{isCurrent: true, isHover: true}"
                                        :edit-config="{ trigger: 'click', mode: 'row', icon: ' ' }"
                                        :data="Fields.header"
                                        @current-change="headTableDataChange">
                                    <vxe-column field="type" title="类型" style="padding: 0;">
                                        <template #default="{ row }"><span>{{ format(row.type, 'type') }}</span>
                                        </template>
                                    </vxe-column>
                                    <vxe-column title="值" show-overflow field="value">
                                        <template #default="{ row }"><span>{{ ft(row) }}</span></template>
                                    </vxe-column>
                                </vxe-table>
                                <el-form v-if="formstyle" :model="formstyle" size="small" style="margin-top: 10px;">
                                    <el-form-item label="类型">
                                        <el-select v-model="formstyle.type" class="m-2" placeholder="Select">
                                            <el-option
                                                    v-for="item in List2"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="条码类型" v-if="(formstyle.type===8)">
                                        <el-select v-model="formstyle.format" class="m-2">
                                            <el-option label="CODE128" value="CODE128"></el-option>
                                            <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                            <el-option label="CODE39" value="CODE39"></el-option>
                                            <el-option label="MSI" value="MSI"></el-option>
                                            <el-option label="二维码" value="二维码"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="条码大小" v-if="(formstyle.type===8)">
                                        <el-input-number  v-model="formstyle.height" :min="20" controls-position="right" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="文字" v-if="(formstyle.format!=='二维码')">
                                        <el-switch v-model="formstyle.displayValue"/>
                                    </el-form-item>
                                    <el-form-item label="栅格">
                                        <el-input-number v-model="formstyle.span" :min="0" :max="24" controls-position="right" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="字号" v-if="(formstyle.type!==9&&formstyle.style&&formstyle.type!==8)">
                                        <el-input v-model="formstyle.style.fontSize" size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="图片大小" v-if="formstyle.type===9">
                                        <el-input v-model="formstyle.style.width" size="small" />
                                    </el-form-item>
                                    <el-form-item label="图片边距" v-if="formstyle.type===9">
                                        <el-input v-model="formstyle.style.right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="条码位置" v-if="(formstyle.type===8)">
                                        <span style="margin:0 10px;">上</span>
                                        <el-input size="small" style="width:60px" v-model="formstyle.style.top" placeholder="单位PX"></el-input>
                                        <span style="margin:0 10px;">左</span>
                                        <el-input size="small" style="width:60px" v-model="formstyle.style.left" placeholder="单位PX"></el-input>
                                    </el-form-item>
                                    <el-form-item label="图片" v-if="(formstyle.type===9)">
                                        <el-upload class="avatar-uploader" accept=".png,.jpg, .jpeg,.bmp,.pjp" :show-file-list="false"
                                        :http-request="baseurl" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                                            <img v-if="formstyle.text" style="width:100px" :src="formstyle.text"
                                                 class="avatar"/>
                                            <el-icon v-else class="avatar-uploader-icon">
                                                <Plus/>
                                            </el-icon>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="自定义文本值" v-if="(formstyle.type===0)">
                                        <el-input
                                                v-model="formstyle.text"
                                                size="small"
                                        />
                                    </el-form-item>

                                    <el-form-item label="内边距" size="small" v-if="formstyle.style">
                                        <el-input v-model="formstyle.style.padding" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="外边距" size="small" v-if="formstyle.style">
                                        <el-input v-model="formstyle.style.margin" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="值" v-if="(formstyle.type===1)">
                                        <el-select @change="values1" class="m-2" v-model="formstyle.fieldName"
                                                   placeholder="值" size="small">
                                            <el-option
                                                    v-for="item in mainTable.Fields"
                                                    :key="item.fieldID"
                                                    :label="item.fieldDispName"
                                                    :value="item.fieldName"
                                            />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="标题">
                                        <el-input
                                                v-model="formstyle.title"
                                                size="small"
                                        />
                                    </el-form-item>
                                </el-form>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="表体" :disabled="!Fields.base.isBody" name="third">
                            <vxe-toolbar>
                                <template #buttons>
                                    <vxe-button size="mini" icon="vxe-icon-square-plus" @click="insertEvent1()">新增
                                    </vxe-button>
                                    <vxe-button size="mini" icon="vxe-icon-square-plus" @click="removeEvent1()">删除
                                    </vxe-button>
                                </template>
                            </vxe-toolbar>
                            <vxe-table
                                    border
                                    height="200"
                                    ref="detail"
                                    size="mini"
                                    :row-config="{isCurrent: true, isHover: true}"
                                    :edit-config="{ trigger: 'click', mode: 'row', icon: ' ' }"
                                    :data="Fields.detail" @current-change="detailChange">
                                <vxe-column title="字段名" field="fieldName">
                                    <template #default="{ row }">
                                        <span>{{ formattxte(row) }}</span>
                                    </template>
                                </vxe-column>
                                <vxe-column field="type" title="类型">
                                    <template #default="{ row }">
                                        <span>{{ format(row.type, 'type') }}</span>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                            <el-form :model="detailformstyle" style="margin-top: 10px;" size="small">
                                <el-form-item label="栅格">
                                    <el-input-number v-model="detailformstyle.span" :min="1" :max="24" controls-position="right" size="small"/>
                                </el-form-item>
                                <el-form-item label="是否合计">
                                    <el-radio v-model="detailformstyle.sum" :label="1" size="small" @click="hejijianting">是</el-radio>
                                    <el-radio v-model="detailformstyle.sum" :label="0" size="small" @click="hejijianting">否</el-radio>
                                </el-form-item>
                                <el-form-item label="文字大小" v-if="detailformstyle.style">
                                    <el-input-number  v-model="detailformstyle.style['fontSize']" size="small"  :min="1" :max="140"/>
                                </el-form-item>
                                <el-form-item label="宽" v-show="Fields.base.iscard===1">
                                    <el-input-number :min="1" :max="1000" v-model="detailformstyle.width" controls-position="right" size="small"/>
                                </el-form-item>
                                <el-form-item label="区块高度" v-show="Fields.base.iscard===2">
                                    <el-input-number v-model="detailformstyle.heighty" :min="1" :max="140"  size="small" />
                                </el-form-item>
                                <el-form-item label="行高">
                                    <el-input-number v-model="detailformstyle.rowHeight" :min="1" :max="140"  size="small" />
                                </el-form-item>
                                <el-form-item label="值" v-if="detailformstyle.type!==0" >
                                    <el-select @change="values2" class="m-2" v-model="detailformstyle.fieldName"  placeholder="值" size="small">
                                        <el-option v-for="item in TFields[Fields.base.tableNames].Fields" :key="item.fieldID" :label="item.fieldDispName" :value="item.fieldName" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="标题">
                                    <el-input v-model="detailformstyle.title" size="small" />
                                </el-form-item>
                                <el-form-item label="标题宽度">
                                  <el-input-number v-model="detailformstyle.titleWidth" :min="0" :max="240"  size="small" />
                                </el-form-item>
                                <el-form-item label="标题位置">
                                    <el-select v-model="detailformstyle.titleAlign" size="small" class="m-2">
                                        <el-option label="居左" value="left"></el-option>
                                        <el-option label="居中" value="center"></el-option>
                                        <el-option label="居右" value="right"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="内容位置">
                                    <el-select v-model="detailformstyle.contentAlign" size="small" class="m-2">
                                        <el-option label="居左" value="left"></el-option>
                                        <el-option label="居中" value="center"></el-option>
                                        <el-option label="居右" value="right"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="日期格式">
                                    <el-checkbox v-model="detailformstyle.isDate" label="" size="small"/>
                                    <el-select v-if="detailformstyle.isDate" v-model="detailformstyle.dateStyle" placeholder="请选择日期格式" size="small" class="m-2">
                                        <el-option label="2023-01-01" value="yyyy-MM-dd"></el-option>
                                        <el-option label="20230101" value="yyyyMMdd"></el-option>
                                        <el-option label="2023年01月01日" value="yyyy年MM月dd日"></el-option>
                                        <el-option label="2023-1-1" value="yyyy-M-d"></el-option>
                                        <el-option label="202311" value="yyyyMd"></el-option>
                                        <el-option label="2023年1月1日" value="yyyy年M月d日"></el-option>
                                    </el-select>
                                </el-form-item>
                                 <el-form-item label="标题内容分离">
                                       <el-checkbox v-model="detailformstyle.fl" label="分离" size="small"/> </el-form-item>
                                <el-form-item label="方向">
                                    <el-select class="m-2" v-model="detailformstyle.direction" placeholder="方向" size="small">
                                        <el-option label="左右" :value="0" />
                                        <el-option label="上下" :value="1"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-select v-model="detailformstyle.type" size="small" class="m-2" placeholder="Select">
                                        <el-option v-for="item in List2" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="条码类型" v-if="(detailformstyle.type===8)">
                                    <el-select v-model="detailformstyle.format" size="small" class="m-2">
                                        <el-option label="条形码" value="CODE128"></el-option>
                                        <el-option label="二维码" value="二维码"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="条码大小" v-if="(detailformstyle.type===8)">
                                    <el-input-number  v-model="detailformstyle.height" :min="20" controls-position="right" size="small" />
                                </el-form-item>
                                  <el-form-item label="位置" >
                                       <el-radio-group v-model="detailformstyle.location">
                                         <el-radio label="none">无</el-radio>
                                         <el-radio label="left">左侧</el-radio>
                                         <el-radio label="right">右侧</el-radio>
                                       </el-radio-group>
                                  </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="表尾" :disabled="!Fields.base.isFooter" name="fourth">
                            <div style="height: calc(100vh - 100px); overflow: auto;">
                                <vxe-toolbar>
                                    <template #buttons>
                                        <vxe-button size="mini" icon="vxe-icon-square-plus" @click="insertEvent2()">
                                            新增
                                        </vxe-button>
                                        <vxe-button size="mini" icon="vxe-icon-square-plus" @click="removeEvent2()">
                                            删除
                                        </vxe-button>
                                    </template>
                                </vxe-toolbar>
                                <vxe-table
                                        border
                                        ref="footer"
                                        height="250"
                                        size="mini"
                                        :row-config="{isCurrent: true, isHover: true}"
                                        :edit-config="{ trigger: 'click', mode: 'row', icon: ' ' }"
                                        :data="Fields.footer"
                                        @current-change="footerChange">
                                    <vxe-column field="type" title="类型" style="padding: 0;">
                                        <template #default="{ row }"><span>{{ format(row.type, 'type') }}</span>
                                        </template>
                                    </vxe-column>
                                    <vxe-column title="值" show-overflow>
                                        <template #default="{ row }"><span>{{ format(row, 'value') }}</span></template>
                                    </vxe-column>
                                </vxe-table>
                                <el-form v-if="footerformstyle" :model="footerformstyle" size="small"
                                         style="margin-top: 10px;">
                                    <el-form-item label="类型">
                                        <el-select v-model="footerformstyle.type" class="m-2" placeholder="Select">
                                            <el-option
                                                    v-for="item in List2"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="条码类型" v-if="(footerformstyle.type===8)">
                                        <el-select v-model="footerformstyle.format" class="m-2">
                                            <el-option label="CODE128" value="CODE128"></el-option>
                                            <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                            <el-option label="CODE39" value="CODE39"></el-option>
                                            <el-option label="MSI" value="MSI"></el-option>
                                            <el-option label="二维码" value="二维码"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="条码大小" v-if="(footerformstyle.type===8)">
                                        <el-input-number
                                                v-model="footerformstyle.height"
                                                :min="20"
                                                controls-position="right"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="文字" v-if="(footerformstyle.format!='二维码')">
                                        <el-switch v-model="footerformstyle.displayValue"/>
                                    </el-form-item>
                                    <el-form-item label="栅格">
                                        <el-input-number
                                                v-model="footerformstyle.span"
                                                :min="0"
                                                :max="24"
                                                controls-position="right"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="字号"
                                                  v-if="(footerformstyle.type!==9&&footerformstyle.style&&footerformstyle.type!==8)">
                                        <el-input
                                                v-model="footerformstyle.style['fontSize']"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="图片大小" v-if="footerformstyle.type===9">
                                        <el-input
                                                v-model="footerformstyle.style.width"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="图片边距" v-if="footerformstyle.type===9">
                                        <el-input
                                                v-model="footerformstyle.style.right"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="条码位置" v-if="(footerformstyle.type===8)">
                                        <span style="margin:0 10px;">上</span>
                                        <el-input size="small" style="width:60px" v-model="footerformstyle.style.top"
                                                  placeholder="单位PX"></el-input>
                                        <span style="margin:0 10px;">左</span>
                                        <el-input size="small" style="width:60px" v-model="footerformstyle.style.left"
                                                  placeholder="单位PX"></el-input>
                                    </el-form-item>
                                    <el-form-item label="图片" v-if="(footerformstyle.type===9)">
                                        <el-upload
                                                class="avatar-uploader"
                                                accept=".png,.jpg, .jpeg,.bmp,.pjp"
                                                :show-file-list="false"
                                                :http-request="baseurl"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload"
                                        >
                                            <img v-if="footerformstyle.text" style="width:100px"
                                                 :src="footerformstyle.text" class="avatar"/>
                                            <el-icon v-else class="avatar-uploader-icon">
                                                <Plus/>
                                            </el-icon>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="自定义文本值" v-if="(footerformstyle.type===0)">
                                        <el-input
                                                v-model="footerformstyle.text"
                                                size="small"
                                        />
                                    </el-form-item>
                                    <el-form-item label="内边距" size="small" v-if="footerformstyle.style">
                                        <el-input v-model="footerformstyle.style['padding']" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="外边距" size="small" v-if="footerformstyle.style">
                                        <el-input v-model="footerformstyle.style['margin']" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="值" v-if="(footerformstyle.type!==0)">
                                        <el-select @change="values3" class="m-2" v-model="footerformstyle.title"
                                                   placeholder="值"
                                                   size="small">
                                            <el-option
                                                    v-for="item in mainTable.Fields"
                                                    :key="item.fieldID"
                                                    :label="item.fieldDispName"
                                                    :value="item"
                                            />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="标题">
                                        <el-input
                                                v-model="footerformstyle.title"
                                                size="small"
                                        />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="tPrint" v-show="increaseWidth&&showSet" v-if="!ispath">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基础" name="first">
                            <el-form size="small">
                                <el-form-item label="明细表条数" v-if="Fields.base.iscard===1">
                                    <el-input type="Number" v-model="Fields.base.mingxitiao"></el-input>
                                  </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div style="display:none">
                <vxe-table ref="print"></vxe-table>
            </div>
        </template>
    </vxe-modal>
</template>
<style scoped>
.el-tabs__item {
    padding: 0 10px !important;
}
.prints .vxe-table, .prints .vxe-table th, .prints .vxe-table td, .prints .vxe-table td {
    border-color: #000 !important;
}
.el-form-item--small{
    margin-bottom:10px !important;
}
.el-card .el-card__body {
    overflow: hidden;
    padding: 0px 0px !important;
}

.disflex {
    display: flex;
}
.bjw{
  width: 70px;
}
.cPrint {
    overflow: auto;
    color: #000;
    font-family: "sans-serif";
}

.tPrint {
    width: 280px;
    margin-left:10px ;
    /*height: calc(90vh);*/
    margin-top: 2px;
    background-color: #fff;
    position: relative;
    z-index: 900;
}

.prints .vxe-table--main-wrapper {
    border: 1px solid #000 !important;
}

.prints .vex-cell {
    white-space: pre-line;
    word-break: break-all;
    padding-left: 5px;
    padding-right: 5px;
}

.cardsx .el-card__body {
    overflow: hidden;
}

.borderbotom {
    border: 1px solid #000;
    margin :  -1px 0 0 -1px ;
    overflow: hidden;
}
</style>
<script>
import {getCurrentInstance, nextTick,onMounted, reactive, ref, toRefs, watch} from "vue"
import XEUtils from 'xe-utils'
import {editPrint, getPrinData, postPrint,isgongyingshang} from "/@/api/linkoo/print";
import {Plus} from '@element-plus/icons-vue'
import Sortable from "sortablejs";
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from 'vue-router'
export default {
    name: "print",
    emits:["dayinhou"],
    setup(props, ctx) {
         const {proxy} = getCurrentInstance()
         const route = useRoute()
        let formstyle = ref({})
        let detailformstyle = ref({})
        let footerformstyle = ref({})
        let print = ref()
        let printMe = ref()
        let prints = ref()
        let tPrint = ref()
        let optionField = ref([])
        let Basics = ref(null)
        let detail = ref(null)
        let footer = ref(null)
        let head = ref(null)
        let headerForm = ref(null)
        let refForm = ref(null)
        let ispath=ref(false)
        let footerForm = ref(null)
        let showPrint = ref(false)
        let state = reactive({
            increaseWidth: false,//宽度判断
            iscard: 1,//判断模式类别（1:表格模式，2:卡片模式）
            printObj: {
                id: "printMe"
            },
            form:{},
            isheji:false,
            increaseField:{},
            fy: 0,
            pageWidth: 1,
            pageSize: 899,
            pageSizesxtty: 1,// 分页
            printNum:1,
            Height:1200,
            cardGrid: 24,
            tableNames: '',
            isHead: true,
            showSet: true,
            showname: false,
            ContentWidth:0,
            printType:0,
            haveFooter: false,
            isBody: false,
            isFooter: false,
            headTableData: [{text: '123'}],
            activeName: "first",
            RecordID: 0,
            formData: {},
            DetailsData: {},
            resize: 0,
            AllData: {},
            itemRefs: {},
            ShowFooter: {},
            FooterFields: [],
            printData: {name:''},
            Fields: {base: {cardInterval: 0, fontSize: 16, height: 26,showSeq:0,increaseField:''}},
            Combo: [],
            TFields: {},
            templateCOde:'',
            Rid:0,
            mainTable: [],
            sortable: null,
            addstyle: {
                pa: {'position': 'absolute', 'top': '0', 'left': '0'},
                ftsi: {'fontSize': '12px'}
            },
            style: {
                paddingTop: '60px',
                paddingRight: '20px',
                paddingBottom: '60px',
                paddingLeft: '20px'
            }
        })
        watch(formstyle.value, () => {
            if (formstyle.value.type === 8 || formstyle.value.type === 9) {
                formstyle.value.style = state.addstyle.pa
            } else {
                formstyle.value.style = state.addstyle.ftsi
            }
        })
        // watch(showPrint, () => {
        //     if (state.sortable) {
        //         state.sortable.destroy();
        //     }
        // })
        const rowDrop = (value) => {
            if (value === 'head') {
                nextTick(() => {
                    state.sortable = Sortable.create(
                        head.value.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
                        {
                            handle: ".vxe-body--row",
                            animation: 150,
                            onEnd: ({newIndex, oldIndex}) => {
                                state.Fields.header.splice(newIndex, 0, state.Fields.header.splice(oldIndex, 1)[0])
                                var newArray = state.Fields.header.slice(0);
                                state.Fields.header = []
                                nextTick(() => {
                                    state.Fields.header = newArray
                                })
                            }
                        }
                    )
                })
            } else if (value === 'detail') {
                nextTick(() => {
                    state.sortable = Sortable.create(
                        detail.value.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
                        {
                            handle: ".vxe-body--row",
                            animation: 150,
                            onEnd: ({newIndex, oldIndex}) => {
                                state.Fields.detail.splice(newIndex, 0, state.Fields.detail.splice(oldIndex, 1)[0])
                                var newArray = state.Fields.detail.slice(0);
                                state.Fields.detail = []
                                nextTick(() => {
                                    state.Fields.detail = newArray
                                    hejijianting()
                                })
                            }
                        }
                    )
                })
            } else if (value === 'footer') {
                nextTick(() => {
                    state.sortable = Sortable.create(
                        footer.value.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
                        {
                            handle: ".vxe-body--row",
                            animation: 150,
                            onEnd: ({newIndex, oldIndex}) => {
                                state.Fields.footer.splice(newIndex, 0, state.Fields.footer.splice(oldIndex, 1)[0])
                                var newArray = state.Fields.footer.slice(0);
                                state.Fields.footer = []
                                nextTick(() => {
                                    state.Fields.footer = newArray
                                })
                            }
                        }
                    )
                })
            }

        }
        const Load = (type,code, {printData, rid, DataSource, Combo, maintable, detailtable}) => {
            isgongyingshang().then((res)=>{
                if(res.data.checkedRoleIds.indexOf(3)!=-1||res.data.checkedRoleIds.indexOf(4)!=-1){
                    ispath.value=false
                }else{
                    ispath.value=true
                }
                console.log(res);
            })
            console.log(type,code,"---",printData, rid, DataSource, Combo, maintable, detailtable);
            state.printData = printData
            state.mainTable = maintable
            state.templateCOde=code,
                state.Rid=rid
            XEUtils.arrayEach(detailtable, field => {
                state.TFields[field.tableName] = field
            })
            state.TFields[maintable.tableName] = maintable

            XEUtils.arrayEach(printData.content.detail, field => {
                if (field.sum !== undefined && field.sum > 0) {
                    state.haveFooter = true
                    state.FooterFields.push(field.fieldName)
                }
            })
            if (type === 1) {
                getPrinData({id: printData.id, rid: rid}).then(res => {
                    const AllData = res.data.data
                    state.formData = XEUtils.omit(AllData, 'ChildTables')
                    if (AllData.ChildTables) {
                        state.DetailsData = XEUtils.clone(AllData.ChildTables, true)
                    }

                })
            } else {
                state.formData = XEUtils.omit(DataSource, 'ChildTables')
                if(!XEUtils.isEmpty(printData.content.base.increaseField)){
                    state.increaseField['field']=printData.content.base.increaseField
                    state.increaseField['value']=state.formData[printData.content.base.increaseField]
                }
                state.DetailsData = DataSource['ChildTables']
            }
            if(type===2){
                state.showSet=false
                state.increaseWidth=false
            }
            state.Fields = printData.content
            state.Fields.base = state.Fields.base || {style: {}}
            if(!state.Fields.base.mingxitiao){
              state.Fields.base.mingxitiao=6
            }
            state.Fields.header.forEach((item, index) => {
                state.Fields.header[index].span = state.Fields.header[index].span * 1
            })
            state.printType=type
            showPrint.value = true
             state.Fields.base.style.width = state.Fields.base.pageSize + 'px'
             state.ContentWidth=state.Fields.base.pageSize- XEUtils.toNumber(state.Fields.base.style.paddingRight) - XEUtils.toNumber(state.Fields.base.style.paddingLeft)-2
              setTimeout(()=>{
                setHeight()
                hejijianting()
              },50)
        }

        const setHeight=()=>{
              state.Height=!state.increaseWidth&&proxy.$refs.prints[0].clientHeight<1000? proxy.$refs.prints[0].clientHeight+150:1000 ;
        }
        const heightjisuan = (h, lh) => {
            return (h * 1) * (lh * 1)
        }
        const getextend = (data, field) => {
            let extend = XEUtils.toStringJSON(data['Extend'] ? data['Extend'] : '{}')
            if (extend[field.fieldName] === undefined) {
                extend[field.fieldName] = data[field.fieldName]
                data['Extend'] = XEUtils.toJSONString(extend)
            }
            return extend[field.fieldName]
        }
        const formatData = ({cellValue, row, column}) => {
            let extend = XEUtils.toStringJSON(row['Extend'])
            if (extend[column.field] === null || extend[column.field] === undefined) {
                extend[column.field] = cellValue ? cellValue : ''
            }
            return XEUtils.get(extend, column.field)
        }
        const ft = (item) => {
            let str;

            if (item.type === 1 || item.type === 8) {
                str = state.formData[item.fieldName]
            } else {
                str = item.text
            }
            if (item.format !== 'date' || item.format !== 'date') {
                return str
            }
            if (item.format === 'date') {
                return XEUtils.toDateString(XEUtils.toStringDate(str), 'yyyy-MM-dd')
            }
            if (item.format === 'datetime') {
                return XEUtils.toDateString(XEUtils.toStringDate(str), 'yyyy-MM-dd HH:mm:ss')
            }
        }
        const fv=(value,item)=>{
             if (item.isDate){
                 return XEUtils.toDateString(XEUtils.toStringDate(value), item.dateStyle)
             }
             return value

        }
        const sumNum = (list, field) => {
            let count = 0
            list.forEach(item => {
                count += Number(item[field])
            })
            return count
        }

        const footerMethod = ({$table, columns, data}) => {
            const tablename = $table.props.id
            if (state.haveFooter && state.iscard === 1) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计'
                        }
                        if (state.FooterFields.includes(column.property)) {
                            return sumNum(data, column.property)
                        }
                        return null
                    })
                ]
            }
        }
        const fy = (i) => {
            return (state.Fields.base.fy > 0 && ((i + 1) % state.Fields.base.fy) === 0) ? 'always' : ''
        }
        const printEvent1 = (key) => {

            const $table = print.value
            let contentHtml = document.getElementById('printMe').innerHTML
              const regex1 = /<div\sclass="vxe-table--empty-placeholder"\sstyle="top: \d+px; height: \d+px;"><div class="vxe-table--empty-content">暂无数据<\/div><\/div>/gm;
              const regex2 = /<div\sclass="vxe-table--empty-block"\sstyle="width: \d+px;"><div class="vxe-table--empty-content">暂无数据<\/div><\/div>/gm;
              contentHtml = contentHtml.replace(regex1, '');
              contentHtml = contentHtml.replace(regex2, '');
            // let htmltop;
            // let htmlz;
            // let htmlw;
            // if(state.Fields.base.mingxitiao>0&&state.Fields.base.mingxitiao){
            //   htmltop = document.getElementById('htmlTitle').innerHTML
            //   htmlz= document.getElementById('htmlzong').innerHTML
            //   htmlw= document.getElementById('htmlwei').innerHTML
            // }else{
              
            // }
            console.log(contentHtml);
            $table.print({
                sheetName: '打印表格',
                style: `
                    .vxe-table, .vxe-table th, .vxe-table td, .vxe-table td {}
                    .vxe-table .vxe-body--column{
                        
                    }
                    .el-card{
				        margin-top:20px;

				        padding: 20px;
				        border-radius: 5px;
                        ont-size: 12px;
			        }
                    .el-card .el-card__body{
                        overflow: hidden; padding: 0px 0px !important;
                    }
                    .borderbotom{
                        border: 1px solid #000;
                        overflow: hidden;
                    }
                    .gao{
                      height: 964px;
                    }
                    @media print {
                        thead th {
                            position: sticky;
                            top: 0;
                            background-color: #f8f8f8;
                        }
                        .no-break {
                            page-break-after: always;
                        }
                    }
                `,

                beforePrintMethod: ({content}) => {
                    const reg = /<div[^>]*class\s*=\s*['"]vxe-body--y-space['"][^>]*><\/div>/g;
                    content = contentHtml.replace(reg, '')
                    console.log(content);
                    
                    return content
                }
            })
            console.log(state.templateCOde,state.Rid);
            if(state.templateCOde=='S0010'){
                postPrint(state.templateCOde,state.Rid).then((res)=>{
                    console.log(res);
                })
            }
            ctx.emit('dayinhou',{code:state.templateCOde,id:state.Rid})
        }
        const printSettings = () => {
            state.increaseWidth = !state.increaseWidth
            setHeight()
        }
        const format = (type, value) => {
            if (value === 'type') {
                if (type === 9) {
                    return '图片'
                } else if (type === 1) {
                    return '字段'
                } else if (type === 3) {
                    return '日期'
                } else if (type === 0) {
                    return '自定义文本'
                } else if (type === 8) {
                    return '条码'
                }
            } else if (value === 'value') {
                if (type.type === 0 || type.type === 9 || type.type === 8) {
                    return type.text
                } else if (type.type === 1) {
                    return type.title
                }
            } else {
                if (type.type === 0 || type.type === 8) {
                    return type.text
                } else if (type.type === 1) {
                    return type.title
                }
            }


        }
        const formattxte = (row) => {
            if (row.text) {
                return row.text
            } else {
                return row.title
            }
        }
        // 获取高亮
        const headTableDataChange = () => {
            // console.log(head.value.getCurrentRecord());
            formstyle.value = head.value.getCurrentRecord()
            rowDrop('head')
        }
        // 基础设置获取高亮
        const BasicsChange = () => {
            optionField.value = Basics.value.getCurrentRecord().Fields
        }
        const insertEvent = async (row) => {
            state.Fields.header.push({
                type: 0,
                title: '',
                format: '',
                text: '12345',
                fieldName: "",
                span: 24, contentAlign:'left',titleAlign:'left',
                style: {fontSize: state.Fields.base.fontSize,textAlign:'left'}
            })
            head.value.reloadData(state.Fields.header)
        }
        const baseurl = (file) => {
            let reader = new FileReader();
            reader.readAsDataURL(file.file);
            reader.onload = function (e) {
                formstyle.value.text = 'data:image/gif;base64,' + e.target.result.split(",")[1];
            }
        }
        const values1 = (value) => {
            const f= XEUtils.find(state.mainTable.Fields,item=>item.fieldName===value)
            formstyle.value.title = f.fieldDispName;
        }
        const removeEvent = () => {
            //  head.value.getCurrentRecord()
            if (head.value.getCurrentRecord()) {
                state.Fields.header.forEach((item, index) => {
                    if (item === head.value.getCurrentRecord()) {
                        state.Fields.header.splice(index, 1)
                    }
                })
                head.value.reloadData(state.Fields.header)
            }
        }
        const detailChange = () => {
            // console.log(detail.value.getCurrentRecord());

            detailformstyle.value = detail.value.getCurrentRecord()
            if(detailformstyle.value.rowHeight===undefined){
                detailformstyle.value.rowHeight=state.Fields.base.height
            }
            // console.log(detailformstyle.value )
            rowDrop('detail')
        }
        const removeEvent2 = () => {
            if (footer.value.getCurrentRecord()) {
                state.Fields.footer.forEach((item, index) => {
                    if (item === footer.value.getCurrentRecord()) {
                        state.Fields.footer.splice(index, 1)
                    }
                })
                footer.value.reloadData(state.Fields.footer)
            }
        }
        const insertEvent2 = () => {
            state.Fields.footer.push({type: 0, contentAlign:'left',titleAlign:'left', title: '', format: '', text: '', fieldName: "", span: 24, style: {fontSize: state.Fields.base.fontSize,textAlign:'left'}})
            footer.value.reloadData(state.Fields.footer)
        }
        const insertEvent1 = () => {
            state.Fields.detail.push({
                fl: 1,
                rowHeight:state.Fields.base.height,
                titleWidth:state.Fields.base.titleWidth,
                contentAlign:'left',
                titleAlign:'left',
                type: 1,
                direction: 0,
                sum: 0,
                title: '',
                heighty: 1,
                format: '',
                text: '',
                fieldName: "",
                span: 24,
                style: {fontSize: state.Fields.base.fontSize,textAlign:'left'}
            })
            detail.value.reloadData(state.Fields.detail)
        }
        const removeEvent1 = () => {
            if (detail.value.getCurrentRecord()) {
                state.Fields.detail.forEach((item, index) => {
                    if (item === detail.value.getCurrentRecord()) {
                        state.Fields.detail.splice(index, 1)
                    }
                })
                detail.value.reloadData(state.Fields.detail)
            }
        }
        const footerChange = () => {
            footerformstyle.value = footer.value.getCurrentRecord()
            rowDrop('footer')
        }
        const values2 = (v) => {
          const f= XEUtils.find(state.TFields[state.Fields.base.tableNames].Fields,item=>item.fieldName===v)
            detailformstyle.value.title = f.fieldDispName;
        }
        const values3 = (v) => {
            footerformstyle.value.fieldName = v.fieldName;
            footerformstyle.value.title = v.fieldDispName;
        }
        const jiangepanduan = (i) => {
            if (state.Fields.base.cardInterval === 0) {
                return
            } else if (XEUtils.arrayLastIndexOf([1, 2, 3, 4, 6, 8, 12, 24], 24 / state.Fields.base.cardInterval) === i) {
                return 0 + 'px'
            } else {
                return state.Fields.base.cardInterval + 'px'
            }
        }
        const saveSettings = () => {
            state.printData.content = JSON.stringify(state.Fields)
            editPrint(state.printData).then((res) => {
                ElMessage({
                    type: 'success',
                    message: "保存成功",
                })
            })
        }
        const resizableWidth = ({$rowIndex, column, columnIndex, $columnIndex, $event}) => {
            const tb = detail.value
            const row = XEUtils.find(tb.getTableData().fullData, item => item.fieldName === column.field)
            tb.setCurrentRow(row)
            detailChange()
            detailformstyle.value.width = column.renderWidth
          // state.Fields.base.pageSize = 30 + XEUtils.toNumber(state.Fields.base.style.paddingRight) + XEUtils.toNumber(state.Fields.base.style.paddingLeft) + XEUtils.sum(state.itemRefs[state.Fields.base.tableNames].getTableColumn().fullColumn, 'renderWidth')
           state.Fields.base.style.width = state.Fields.base.pageSize + 'px'
           state.ContentWidth=state.Fields.base.style.width- XEUtils.toNumber(state.Fields.base.style.paddingRight) - XEUtils.toNumber(state.Fields.base.style.paddingLeft)-2
        }

        const beforeHideMethod = async () => {
            state.increaseWidth = false
        }
        const increaseValue = (index) => {
             let v=state.increaseField['value']
         return XEUtils.isEmpty(v)?'':(v.substring(0,v.lastIndexOf("0"))+(XEUtils.toNumber(v.substring(v.lastIndexOf("0")+1))+index-1).toString())

        }
        const hejijianting = ()=>{
            let tt = true
            state.Fields['detail'].forEach((item)=>{
                console.log(item);
                if(item.sum==1){
                    tt = false
                    state.isheji=true
                }
            })
            if(tt){
                state.isheji=false
            }
        }
        const hejijisuan = (shuju,key)=>{
            let sun = 0;
            shuju.forEach(item=>{
                sun =sun+item[key]
            })
            sun=Math.ceil(sun * 100) / 100;
            let str = sun.toString();
            
            const regex = /\.(\d)$/;
            const match = str.match(regex)
            if (match){
                return str+'0'
            }else{
                return str
            }
            
        }
        return {
            ...toRefs(state)
            , Load, formstyle, Plus, rowDrop, detailChange, detailformstyle, detail,
            XEUtils, printEvent1, removeEvent,
            refForm, footerForm, headerForm,prints,printMe,
            getextend, fy,
            footerChange,
            formatData,
            footerMethod,
            ft, format,
            heightjisuan,
            printSettings,
            formattxte,
            head, resizableWidth,hejijianting,hejijisuan,
            saveSettings,
            values1,
            footerformstyle,
            Basics, showPrint,
            baseurl,
            footer, print,
            optionField, values3,
            headTableDataChange,increaseValue,fv,
            BasicsChange,
            List2: [{label: '字段', value: 1}, {label: '图片', value: 9}, {label: '自定义文本', value: 0}, {label: '条码',value: 8}, {label: '自增',value: 3}], beforeHideMethod,
            insertEvent,
            insertEvent2,
            removeEvent2,
            insertEvent1,
            removeEvent1,
            values2,ispath,
            jiangepanduan
        }
    }
}
</script>
